<template>
	<view class="page">
		<Navbar title="个人基本信息"></Navbar>
		<view class="form">
			<view class="form-data">
				<view class="label">真实姓名</view>
				<input class="value" type="text" placeholder="请输入真实姓名" v-model="formData.name" />
			</view>
			<view class="form-data">
				<view class="label">手机号码</view>
				<input class="value" type="text" disabled placeholder="填写手机号" v-model="formData.tel" />
			</view>
			<view class="form-data">
				<view class="label">身份证号码</view>
				<input class="value" type="text" placeholder="请输入身份证号码" v-model="formData.idNo" />
			</view>
			<view class="form-data">
				<view class="label">性别</view>
				<view class="u-flex value" style="padding: 0 30rpx">
					<u-radio-group v-model="formData.gender" width="150rpx">
						<u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index"
							:name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-data">
				<view class="label">出生日期</view>
				<view class="value u-flex" @click="showTime = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.birthDate || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">籍贯</view>
				<view class="value u-flex" @click="showRegion = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.domicilePlace || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">学历</view>
				<view class="value u-flex" @click="showEducation = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.educationLabel || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">民族</view>
				<view class="value u-flex" @click="showNation = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.nationLabel || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">婚姻状况</view>
				<view class="value u-flex" @click="showMarriage = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.maritalStatusLabel || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">现住地址</view>
				<input class="value" type="text" placeholder="填写现住地址" v-model="formData.address" />
				<!-- <button class="u-reset-button get-phone">获取地址</button> -->
			</view>
			<view class="form-data">
				<view class="label">自我介绍</view>
				<u-input v-model="formData.comment" type="textarea" placeholder="请输入自我介绍（100字以内）" maxlength="100"
					:border="false" :height="200" :auto-height="true" />
			</view>
		</view>

		<view style="height: 200rpx;"></view>

		<view v-show="UserType == null">
			<view class="agree">
				<view class="agree_img" @click="agree_flag = !agree_flag" v-if="!agree_flag">
					<image src="../../../static/operate/check.png"></image>
					<span> 我已阅读并同意 </span>
				</view>
				<view class="agree_img" @click="agree_flag = !agree_flag" v-if="agree_flag">
					<image src="../../../static/operate/checked.png"></image>
					<span> 我已阅读并同意 </span>
				</view>
				<view class="agree_text" style="font-size: 34rpx;">
					<span @click="link_to_page('/pages-home/pages/agreement/privacy')">《保密协议》</span>
				</view>
			</view>
			<view class="u-flex footer-button">
				<image src="/static/image/icon-work-phone.png" @click="callPhone"></image>
				<view class="u-flex-1"><u-button type="primary" shape="circle" @click="confirmForm">提交审核</u-button>
				</view>
			</view>

		</view>

		<u-picker mode="time" v-model="showTime" :params="paramsTime" @confirm="confirmTime"></u-picker>
		<u-picker mode="region" v-model="showRegion" @confirm="confirmDomicilePlace"></u-picker>
		<u-select v-model="showEducation" :list="educationList" @confirm="confirmEducation"></u-select>
		<u-select v-model="showNation" :list="nationList" @confirm="confirmNnation"></u-select>
		<u-select v-model="showMarriage" :list="marriageList" @confirm="confirmMarriage"></u-select>
		<u-modal v-model="showModal" @confirm="confirmModal" content="登记成功,稍后客服人员会联系您,请保持通讯畅通!"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserType:undefined,
				formData: {
					city: '无',
					tel: '',
					name: '',
					idNo: '',
					gender: '',
					birthDate: '',
					domicilePlace: '',
					education: '',
					nation: '',
					maritalStatus: '',
					address: '',
					comment: ''
				},
				radioList: [{
						name: '女'
					},
					{
						name: '男'
					}
				],
				showTime: false,
				paramsTime: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showRegion: false,
				showEducation: false,
				showModal: false,
				educationList: [{
						"$id": "2",
						label: "小学及以下",
						value: "01"
					},
					{
						"$id": "3",
						label: "小学",
						value: "02"
					},
					{
						"$id": "4",
						label: "初中",
						value: "03"
					},
					{
						"$id": "5",
						label: "中专",
						value: "04"
					},
					{
						"$id": "6",
						label: "高中",
						value: "05"
					},
					{
						"$id": "7",
						label: "大专",
						value: "06"
					},
					{
						"$id": "8",
						label: "本科",
						value: "07"
					}
				],
				showNation: false,
				nationList: [{
						"$id": "2",
						label: "汉族",
						value: "01"
					},
					{
						"$id": "3",
						label: "其他",
						value: "02"
					},
					{
						"$id": "4",
						label: "壮族",
						value: "03"
					},
					{
						"$id": "5",
						label: "满族",
						value: "04"
					},
					{
						"$id": "6",
						label: "回族",
						value: "05"
					},
					{
						"$id": "7",
						label: "苗族",
						value: "06"
					},
					{
						"$id": "8",
						label: "维吾尔族",
						value: "07"
					},
					{
						"$id": "9",
						label: "土家族",
						value: "08"
					},
					{
						"$id": "10",
						label: "彝族",
						value: "09"
					},
					{
						"$id": "11",
						label: "蒙古族",
						value: "10"
					},
					{
						"$id": "12",
						label: "藏族",
						value: "11"
					},
					{
						"$id": "13",
						label: "布依族",
						value: "12"
					},
					{
						"$id": "14",
						label: "侗族",
						value: "13"
					},
					{
						"$id": "15",
						label: "瑶族",
						value: "14"
					},
					{
						"$id": "16",
						label: "朝鲜族",
						value: "15"
					},
					{
						"$id": "17",
						label: "白族",
						value: "16"
					},
					{
						"$id": "18",
						label: "哈尼族",
						value: "17"
					},
					{
						"$id": "19",
						label: "哈萨克族",
						value: "18"
					},
					{
						"$id": "20",
						label: "黎族",
						value: "19"
					},
					{
						"$id": "21",
						label: "傣族",
						value: "20"
					},
					{
						"$id": "22",
						label: "畲族",
						value: "21"
					},
				],
				showMarriage: false,
				marriageList: [{
						value: '01',
						label: '未婚'
					},
					{
						value: '02',
						label: '已婚'
					},
					{
						value: '03',
						label: '单身'
					}
				],
				formType: 1,
				formId: '',
				agree_flag: false,
			};
		},
		onLoad(e) {
			// usertype 0 普通用户 1 保姆 2 保洁 3 家政公司
			// OtherId  对应的编号， 用来获取 个人信息的
			console.log(e);
			const token = uni.getStorageSync('USER_INFO')
			this.formData.tel = token.Telphone
			this.UserType = token.UserType || null;
			this.formType = e.type || 1;
			this.formId = e.id || '';
			if (this.formId) {
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				});
				if (this.formType == 1) {
					// 保姆
					this.$u.api.AppEmpInfo({
						id: this.formId
					}).then(res => {
						uni.hideLoading();
						const date = new Date(res.data.BirthDate);
						// 格式化为 'yyyy-mm-dd' 形式
						const formattedDate = date.toLocaleDateString('en-CA'); // 'en-CA' 使用 ISO 格式 (yyyy-mm-dd)
						const Education = this.educationList.find(item => item['value'] === res.data.Education);
						const Nation = this.nationList.find(item => item['value'] === res.data.Nation);
						const MaritalStatus = this.marriageList.find(item => item['value'] === res.data
							.MaritalStatus);
						this.formData = {
							name: res.data.Name,
							tel: res.data.Tel,
							idNo: res.data.IdNo,
							gender: res.data.Gender,
							birthDate: formattedDate,
							domicilePlace: res.data.DomicilePlace,
							education: res.data.Education,
							educationLabel: Education['label'],
							nation: res.data.Nation,
							nationLabel: Nation['label'],
							maritalStatus: res.data.MaritalStatus,
							maritalStatusLabel: MaritalStatus['label'],
							address: res.data.Address,
							comment: res.data.Comment
						};
					});
				} else {
					// 保洁
					this.$u.api.PurifierInfo({
						id: this.formId
					}).then(res => {
						uni.hideLoading();
						const date = new Date(res.data.BirthDate);
						// 格式化为 'yyyy-mm-dd' 形式
						const formattedDate = date.toLocaleDateString('en-CA'); // 'en-CA' 使用 ISO 格式 (yyyy-mm-dd)
						const Education = this.educationList.find(item => item['value'] === res.data.Education);
						const Nation = this.nationList.find(item => item['value'] === res.data.Nation);
						const MaritalStatus = this.marriageList.find(item => item['value'] === res.data
							.MaritalStatus);
						this.formData = {
							name: res.data.Name,
							tel: res.data.Tel,
							idNo: res.data.IdNo,
							gender: res.data.Sex,
							birthDate: formattedDate,
							domicilePlace: res.data.DomicilePlace,
							education: res.data.Education,
							educationLabel: Education['label'],
							nation: res.data.Nation,
							nationLabel: Nation['label'],
							maritalStatus: res.data.MaritalStatus,
							maritalStatusLabel: MaritalStatus['label'],
							address: res.data.Address,
							comment: res.data.Comment
						};
					});
				}
			},
			radioChange(e) {
				this.formData.gender = e;
			},
			confirmTime(e) {
				this.formData.birthDate = `${e.year}-${e.month}-${e.day}`;
			},
			confirmDomicilePlace(e) {
				this.formData.domicilePlace = `${e.province.label}${e.city.label}${e.area.label}`;
			},
			//学历
			confirmEducation(e) {
				this.formData.educationLabel = e && e[0] && e[0].label;
				this.formData.education = e && e[0] && e[0].value;
			},
			//民族
			confirmNnation(e) {
				this.formData.nationLabel = e && e[0] && e[0].label;
				this.formData.nation = e && e[0] && e[0].value;
			},
			//婚姻状况
			confirmMarriage(e) {
				this.formData.maritalStatusLabel = e && e[0] && e[0].label;
				this.formData.maritalStatus = e && e[0] && e[0].value;
			},
			confirmForm() {
				let errorMessage = '';
				if (!this.agree_flag) {
					errorMessage = '请勾选保密协议';
				}
				if (!this.formData.comment) {
					errorMessage = '请输入自我介绍';
				}
				if (!this.formData.address) {
					errorMessage = '请输入现住地址';
				}
				if (!this.formData.maritalStatus) {
					errorMessage = '请选择婚姻状况';
				}
				if (!this.formData.nation) {
					errorMessage = '请选择民族';
				}
				if (!this.formData.education) {
					errorMessage = '请选择学历';
				}
				if (!this.formData.domicilePlace) {
					errorMessage = '请选择籍贯';
				}
				if (!this.formData.birthDate) {
					errorMessage = '请选择出生日期';
				}
				if (!this.formData.gender) {
					errorMessage = '请选择性别';
				}
				if (!this.$u.test.idCard(this.formData.idNo)) {
					errorMessage = '请输入正确的身份证号码';
				}
				if (!this.formData.name) {
					errorMessage = '请输入姓名';
				}
				if (!this.$u.test.mobile(this.formData.tel)) {
					errorMessage = '请输入正确的手机号';
				}

				if (errorMessage) {
					uni.showToast({
						title: errorMessage,
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '提交中',
					mask: true
				});
				let api = null;
				if (this.formType == 1) {
					api = this.$u.api.setNannyReg;
				} else if (this.formType == 2) {
					api = this.$u.api.setPurifierReg;
				}
				api(this.formData).then(res => {
					console.log(res);
					if (res && res.code == 0) {
						this.isLogoin()
					} else {
						uni.showToast({
							title: res?.message ?? '登记失败',
							icon: 'none'
						});
					}
					uni.hideLoading();
				});
			},
			confirmModal() {
				uni.switchTab({
					url: '/pages/home/index'
				});
			},
			isLogoin() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				let $this = this;
				this.getWxCode(code => {
					this.$u.api.getOpenId(code).then(res => {
						if (res && res.code == 0) {
							uni.setStorageSync('USER_INFO', res.data || {});
						}
						uni.hideLoading();
						$this.showModal = true;
					});
				});
			},
			// 基于uni的获取code方法
			getWxCode(callBack) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						callBack(loginRes.code);
					},
					fail(e) {}
				});
			},
			callPhone() {
				// 电话号码为示例，请替换为实际需要拨打的号码
				const phoneNumber = '0731-85500930';
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;
	}

	.form {
		padding: 10rpx 20rpx 20rpx;
		background-color: #fff;
	}

	.form-data {
		position: relative;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #dcdcdc;

		&:last-child {
			border: none;
		}

		.label {
			font-size: 32rpx;
			font-weight: 600;
		}

		.value {
			font-size: 30rpx;
			height: 70rpx;
		}

		.get-phone {
			position: absolute;
			bottom: 15rpx;
			right: 20rpx;
			color: $u-type-primary;
		}
	}

	.footer-button {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 98rpx;
		padding: 13rpx 20rpx;
		background-color: #ffffff;

		image {
			width: 58rpx;
			height: 58rpx;
			margin-right: 30rpx;
		}
	}

	.agree {
		position: fixed;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		bottom: 97rpx;
		width: 100vw;
		height: 120rpx;
		line-height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		z-index: 999;
	}

	.agree_img {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.agree_img image {
		width: 32rpx;
		height: 32rpx;
		position: relative;
		left: -6rpx;
	}

	.agree_text {
		margin-left: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #8f92a1;
		line-height: 24rpx;
		display: flex;
		align-items: center;

		span {
			color: $app-theme-color;
		}
	}
</style>